<template>
  <div class="chart-content-wrapper-new dis-type-avg-in-hos-analyse-wrapper">
    <div class="header-content-wrapper">
      <div class="medical-title-box">
        <span class="medical-title-name">{{reportName}}</span>
        <span class="title-bk-container"></span>
      </div>
      <div class="chart-title title-right-wrapper">
        <div class="area-title-name" @mouseenter="mouseenter()"
             @mouseleave="mouseleave()">{{ getStartSevenText(areaCodeText)
          }} &nbsp; | &nbsp; {{getStartSevenText(hospName)}}&nbsp; | &nbsp; {{getStartSevenText(disDetail.disName)}}
        </div>
      </div>
      <div class="chart-title-floating title-right-wrapper1" v-show="showFloating">
        <span>统筹区: {{ areaCodeText }}</span><br>
        <span>医疗机构: {{ hospName }}</span><br>
        <span>病种名称: {{ disDetail.disName }}</span>
      </div>
    </div>
    <div class="extra-style-display1" v-show="false">
      <el-radio v-model="radio" label="1">次均</el-radio>
      <el-radio v-model="radio" label="2">人均</el-radio>
    </div>
    <div class="detail-content-avg-wrapper chart-container" id="detail-content-avg-wrapper-id" v-show="isShowChart">

    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {getPersonInHosAnalyse} from '../../../api/last-api'
  import {bus} from '../../last/filter/js/bus'
  import {getYaxisMaxMin} from '../../last/chart/utils/mathUtils'
  import {setChartHeight, loadingOpt, isJanuary} from '../../../assets/js/utils.js'


  export default {
    props: ['isChange', 'fullScreen', 'isCollapse'],
    components: {},
    data() {
      return {
        reportName: '基于病种的平均住院日分析',
        showFloating: false,
        isShowChart: true,
        areaCodeText: '',
        hospName: '',
        disDetail: '',
        radio: '1',
        paixu: '0',
        paixuText: '次均',
      }
    },
    created() {
    },
    mounted(){
      let allContent = document.querySelector('#all-chart-content-id');
      let currentContent = document.querySelector('#base-on-disease-analyse-id')
      let allHeight = allContent.style.height.replace('px', '');
      let currentHeight = currentContent.style.height.replace('px', '');
      console.log('allHeight=' + allHeight)
      console.log('currentHeight=' + currentHeight)

      this.myChart = this.$echarts.init(document.getElementById('detail-content-avg-wrapper-id'));
      bus.$on('sendDiseaseTypeFilter', (disFilter) => {
        this.areaCode = disFilter.areaCode
        this.disDetail = disFilter.disDetail
        this.hospCode = disFilter.hospCode
        this.hospLevel = disFilter.hospLevel
        this.medicalCategory = disFilter.medicalCategory

        if (this.medicalCategory == '21,24' || this.medicalCategory == '') {
          currentContent.style.display = ''
          allContent.style.height = allHeight + 'px'
        } else {
          currentContent.style.display = 'none'
          allContent.style.height = allHeight - currentHeight + 'px'
        }
        // 显示文案
        this.areaCodeText = disFilter.areaCodeText
        this.filter = disFilter.filter
        this.hospName = this.getHospName(disFilter.resultLevel, disFilter.hospCode)

        this.getScatterData();
      });
    },
    methods: {
      getHospName (resultLevel, hospCode) {
        let mainHospIdArr = resultLevel.split(',');
        let subHospIdArr = hospCode.split(',');
        var hospName = '';

        //  三级医院
        var tempName = '';
        if (mainHospIdArr.includes('3')) {
          tempName += '三级医院';
        } else {
          if (subHospIdArr.length) {
            tempName += this.getSubHospName(subHospIdArr, this.filter.nc.detailHospital[0].child);
          }
        }

        if (hospName.length && tempName.length) {
          hospName += '、';
        }

        if (tempName.length) {
          hospName += tempName;
        }

        //  二级医院
        tempName = '';
        if (mainHospIdArr.includes('2')) {
          tempName += '二级医院';
        } else {
          tempName += this.getSubHospName(subHospIdArr, this.filter.nc.detailHospital[1].child);
        }
        if (hospName.length && tempName.length) {
          hospName += '、';
        }

        if (tempName.length) {
          hospName += tempName;
        }

        //  一级医院
        tempName = '';
        if (mainHospIdArr.includes('1')) {
          tempName += '一级医院';
        }
        if (hospName.length && tempName.length) {
          hospName += '、';
        }

        if (tempName.length) {
          hospName += tempName;
        }

        return hospName;
      },
      getSubHospName (subHospCodes, filter) {
        var subHospName = [];
        subHospCodes.forEach((item, index) => {
          filter.forEach((obj, objIndex) => {
            if (item == obj.selectId) {
              subHospName.push(obj.selectName);
            }
          });
        });

        return subHospName.join('、');
      },
      getScatterData() {
        if (this.myChart) {
          this.myChart.clear();
          this.myChart.showLoading(loadingOpt)
        }
        getPersonInHosAnalyse(this.areaCode, this.disDetail.disCode, this.hospCode, this.hospLevel,
          this.medicalCategory, this.paixu).then(response => {
          let json = response.data;
          if (response.code == 0) {
            this.myChart.hideLoading();
            this.isShowChart = true;
//            this.reportName = json.reportName;
//            this.conclusion = json.conclusion;
//            this.remark = json.remark;
            this.drawEchartLine(json)
          } else {
            this.isShowChart = false;
          }
        }).catch(res => {
          console.log(res)
          this.isShowChart = false;
        })
      },
      drawEchartLine(json) {
        let maxMin = getYaxisMaxMin(json.rsDays)
        let maxMin1 = getYaxisMaxMin(json.ciDays)
        let newMax = getYaxisMaxMin([maxMin.Ymax, maxMin1.Ymax]).Ymax
        let newMin = getYaxisMaxMin([maxMin.Ymin, maxMin1.Ymin]).Ymin;
        this.myChart.setOption(
          {
            title: {
              show: false,
              text: '未来一周气温变化',
              subtext: '纯属虚构'
            },
            grid: [
              {
                height: '70%',
                left: '7%',
                top: '10%',
                tooltip: {
                  show: true,
                  trigger: 'axis',
                  axisPointer: {
                    type: 'shadow'
                  },
                }
              }
            ],
            tooltip: {
              show: true,
              formatter: function (params) {
//                console.log(params)
                let dataIndex = params[0].dataIndex
                return `<span style="color:#c7c7c7">平均住院日</span></br>
                        <span style="color:#c7c7c7">年份：${json.years[dataIndex]}</span></br>
                        <span style="color:#c7c7c7">人均：${json.rsDays[dataIndex]}天</span></br>
                        <span style='color:#c7c7c7'>次均：${json.ciDays[dataIndex]}天</span>`
              }
            },
            legend: {
              data: ['平均住院日(人均)', '平均住院日(次均)'],
              left: '40%',
              top: '90%',
//              orient: 'vertical',
//              selectedMode: false,
              itemWidth: 10,
              itemHeight: 10,
              textStyle: {
                color: '#ffffff'
              }
            },
            toolbox: {
              show: false,
              feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
              }
            },
            calculable: true,
            xAxis: [
              {
                axisTick: {
                  show: false //不显示x轴坐标的刻度
                },
                data: json.years,
                axisLine: {
                  show: true, //是否显示横轴的坐标线
                  lineStyle: {
                    color: '#304562'
                  }
                },
                axisLabel: {
                  show: true,
                  color: '#ffffff'
                }
              }
            ],
            yAxis: [
              {
                max: newMax,
                min: newMin,
                type: 'value',
                name: '平均住院日(天)',
                nameTextStyle: {
                  color: '#fff'
                },
                axisLabel: {
                  show: true,
                  color: '#ffffff',
                },
                axisLine: {
                  show: true, //是否显示纵坐标的竖线
                  lineStyle: {
                    color: '#304562'
                  }
                },
                axisTick: {
                  show: false //不显示x轴坐标的刻度
                },
                splitLine: {
                  show: true, // 是否显示横向的分割线
                  type: 'dotted',
                  lineStyle: {
                    color: '#253853'
                  }
                }
              }
            ],
            series: [
              {
                name: '平均住院日(人均)',
                type: 'line',
                data: json.rsDays,
                symbolSize: 10,
                symbol: 'circle',
                color: '#FFD66A',
                showSymbol: true,
                label: {
                  normal: {
                    show: true,
                    position: 'top',
                    fontSize: 12
                  }
                },
//                tooltip: {
//                  show: true,
//                  formatter: function (params) {
////                    console.log(params)
//                    return `<span style="color:#c7c7c7">平均住院日(人数)</span></br>
//                           <span style='color:#c7c7c7'>天数：${json.rsDays[params.dataIndex]}天</span>`
//                  }
//                },
              },
              {
                name: '平均住院日(次均)',
                type: 'line',
                data: json.ciDays,
                symbolSize: 10,
                symbol: 'circle',
                color: '#15A0F1',
                showSymbol: true,
                label: {
                  normal: {
                    show: true,
                    position: 'top',
                    fontSize: 12
                  }
                },
//                tooltip: {
//                  show: true,
//                  formatter: function (params) {
//                    console.log(params)
//                    return `<span style="color:#c7c7c7">平均住院日(人次)</span></br>
//                           <span style='color:#c7c7c7'>天数：${json.ciDays[params.dataIndex]}天</span>`
//                  }
//                },
              }
            ]
          }
        )
      },
      mouseenter () {
        this.showFloating = true;
      },
      mouseleave () {
        this.showFloating = false;
      },
      getStartSevenText(item) {
        if (item && item.length > 7) {
          return item.substring(0, 7) + '...'
        }
        return item
      },
    },
    watch: {
      radio(newVla) {
        if (newVla == 1) {
          this.paixu = 0
          this.paixuText = '次均'
        } else {
          this.paixu = 1
          this.paixuText = '人均'
        }
        this.getScatterData();
      },
      isChange(){
        setTimeout(() => {
          this.myChart.resize();
        }, 201)
      }
    }
  };
</script>

<style lang="scss">
  .dis-type-avg-in-hos-analyse-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .medical-title-box {
      height: 32px;
      line-height: 32px;
      float: left;
      margin-top: 10px;
      margin-left: 40px;
    }
    .medical-title-box span {
      float: left;
    }
    .medical-title-name {
      color: #fff;
      min-width: 100px;
      background: #2e4a74;
      box-sizing: border-box;
      padding-left: 10px;
    }
    .title-bk-container {
      width: 25px;
      height: 32px;
      background: url('../../../assets/img/title-bk.png');
    }

    .title-right-wrapper {
      float: right;
      margin-right: 20px;
    }

    .title-right-wrapper1 {
      right: 20px;
      top: 50px;
      width: 330px;
    }

    .detail-content-avg-wrapper {
      flex: 1;
    }

    .header-content-wrapper {
      width: 100%;
    }

    .extra-style-display1 {
      padding: 5px 0;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
    }

  }

</style>
